<template>
  <dw-menu-datagrid-form
    ref="dictItemGridRef"
    :init-loaded="false"
    :columns="columns"
    v-model:activeFormData="formData"
    :data-grid-title="dataGridTitle"
    :render-form-title="renderFormTitle"
    :get-page-http-config="getPageHttpConfig"
    :del-info-http-config="delInfoHttpConfig"
    :del-list-http-config="delListHttpConfig"
    :get-info-http-config="getInfoHttpConfig"
    :add-info-http-config="addInfoHttpConfig"
    :update-info-http-config="updateInfoHttpConfig"
  >
    <template #dictItemColor="{ scope }">
      <el-tag dw-if="scope.row.dictItemColor" :color="scope.row.dictItemColor" effect="dark" type="info" round>{{ scope.row.dictItemName }}</el-tag>
    </template>
    <template #formSlot>
      <iframe src="http://8.134.197.118:8083/drawio/?lang=zh" style="width: 100%; height: 100%; border: none"></iframe>
    </template>
  </dw-menu-datagrid-form>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IDesignDiagram } from '../design-diagram';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';

defineOptions({
  name: 'DesignDiagramFormGrid',
});

const dictItemGridRef = ref();
const dataGridTitle = '系统设计图列表';
const formData = ref<IDesignDiagram>({
  id: '',
  categoryCode: '',
  designDiagramName: '',
  designDiagramLabels: '',
  sortNo: 1,
});

const renderFormTitle = (stateValue: 'add' | 'edit', data: IDesignDiagram) => {
  if (stateValue === 'add') {
    return '系统图信息';
  } else {
    return data.designDiagramName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'designDiagramName',
    label: '系统设计图名称',
    width: 200,
  },
  {
    prop: 'designDiagramLabels',
    label: '系统标签',
    align: 'left',
  },

  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const params = ref({
  categoryCode: '',
  keyword: '',
});
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/design/diagram/#{id}',
  delInfoMsgEmphasize: '#{designDiagramName}',
};

const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/design/diagram/list',
};

const getPageHttpConfig: IGetPageHttpConfig<IDesignDiagram> = {
  url: '/admin-api/sys/design/diagram/page/list',
  query: () => {
    return { categoryCode: params.value?.categoryCode || '' };
  },
};

const getInfoHttpConfig: IGetInfoHttpConfig<IDesignDiagram> = {
  url: '/admin-api/sys/design/diagram/#{id}',
};

const addInfoHttpConfig: IAddInfoHttpConfig<IDesignDiagram> = {
  url: '/admin-api/sys/design/diagram',
};

const updateInfoHttpConfig: IUpdateInfoHttpConfig<IDesignDiagram> = {
  url: '/admin-api/sys/design/diagram',
};
const loadData = (categoryCode: string) => {
  params.value.categoryCode = categoryCode;
  formData.value.categoryCode = categoryCode;
  dictItemGridRef.value.loadData();
};
const setCategoryCode = (categoryCode: string) => {
  params.value.categoryCode = categoryCode;
  formData.value.categoryCode = categoryCode;
};
defineExpose({ loadData, setCategoryCode });
</script>
<style lang="scss" scoped></style>
